<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
import { useIndexStore } from '@/store'
import item1 from '@/assets/imgs/home/item1.png'
import item2 from '@/assets/imgs/home/item2.png'
import item3 from '@/assets/imgs/home/item3.png'
import item4 from '@/assets/imgs/home/item4.png'
import route1 from '@/assets/imgs/home/route1.png'
import route2 from '@/assets/imgs/home/route2.png'
import route3 from '@/assets/imgs/home/route3.png'
import route4 from '@/assets/imgs/home/route4.png'
import tg from '@/assets/icon/public/tg.png'
import twitter from '@/assets/icon/public/twitter.png'
import github from '@/assets/icon/public/github.png'
import { getOptions } from '@/views/Index/js/chartOptions'
import ApexCharts from 'apexcharts'
const store = useIndexStore()
const router = useRouter()
const { t } = useI18n()
const dataList = ref([
  {
    label: '注册人数',
    value: '250+'
  },
  {
    label: '奖池',
    value: '50+'
  },
  {
    label: '今日收益',
    value: '500W+'
  }
])

const areaList = ref([
  {
    label: '算力认购',
    icon: route1,
    path: '/computing'
  },
  {
    label: '认购订单',
    icon: route2,
    path: '/order'
  },
  {
    label: '邀请有利',
    icon: route3,
    path: '/invitation'
  },
  {
    label: '我的资产',
    icon: route4,
    path: '/mine'
  }
])

let links = ref([
  {
    icon: tg,
    link: ''
  },
  {
    icon: twitter,
    link: ''
  },
  {
    icon: github,
    link: ''
  }
])

const dataListTwo = ref([
  {
    title: '自由组合，无限可能',
    content: '像拼搭乐高一样灵活组合各类金融协议。一键部署专属策略，降低开发门槛，激发创新活力',
    img: item1
  },
  {
    title: '稀缺驱动，价值共生',
    content:
      '创新的激励模型与交易通缩机制，确保$LEGO代币的长期稀缺性与价值增长，让生态参与者共享发展红利',
    img: item2
  },
  {
    title: '多链交互，无缝漫游',
    content: '打破链与链之间的壁垒，实现多链资产的低成本自由流动，汇聚全域流动性',
    img: item3
  },
  {
    title: '安全至上，稳健前行',
    content: '打破链与链之间的壁垒，实现多链资产的低成本自由流动，汇聚全域流动性',
    img: item4
  }
])

const slogans = ref([
  {
    content: '打破链网壁垒，打造“价值互联网”的超级枢纽'
  },
  {
    content: '赋能个体主权，构建“用户为中心”的Web3新范式'
  },
  {
    content: '激活生态协同，共创“共赢共生”的Web3经济体'
  }
])

const initApex = () => {
  let options = getOptions([31, 140, 88, 281, 142, 209, 300])
  let chart = new ApexCharts(document.querySelector('#chart'), options)
  chart.render()
  // watch(indexInfo, (newVal) => {
  //   if (newVal) {
  //     let data = newVal.priceList.map((item) => item.close_price)
  //     let options = getOptions(data)
  //     chart.updateOptions(options)
  //   }
  // })
}

const handleClick = (item) => {
  router.push(item.path)
}

onMounted(() => {
  initApex()
})
</script>
<template>
  <div class="container">
    <div class="px-30">
      <div class="pt-[12px]">
        <div class="w-100% bg-[#FFFFFF1A] rounded-[16px] flex items-center px-20 py-8">
          <van-image width="16" height="16" src="/src/assets/icon/home/notice.png" />
          <div class="font-HarmonyOS text-[20px] text-[#FFFFFF] ml-14">世界公链开启价值新纪元</div>
        </div>
      </div>
      <div class="mt-24px">
        <van-swipe
          :autoplay="3000"
          class="my-swipe"
          width="100%"
          indicator-color="white"
          show-indicators
        >
          <van-swipe-item v-for="(item, index) in [1, 2, 3]" :key="index">
            <van-image
              width="100%"
              height="150px"
              radius="10px"
              src="/src/assets/imgs/home/banner.png"
            />
          </van-swipe-item>
          <template #indicator="{ active, total }">
            <div class="custom-indicator flex items-center gap-4">
              <div
                :class="['w-32', 'h-4', active == index ? 'bg-[#fff]' : 'bg-[#FFFFFF80]']"
                v-for="(value, index) in total"
              ></div>
            </div>
          </template>
        </van-swipe>
      </div>
      <div class="flex items-center w-100% justify-between mt-24px">
        <div
          class="flex flex-col items-center"
          v-for="(item, index) in areaList"
          :key="index"
          @click="() => handleClick(item)"
        >
          <van-image width="50" height="50" :src="item.icon" />
          <div class="text-[#fff] text-[24px] font-HarmonyOS mt-[10px]">{{ item.label }}</div>
        </div>
      </div>
      <div
        class="flex items-center justify-between px-14 py-28 bg-[#FFFFFF1A] rounded-[16px] mt-42px"
      >
        <div class="flex items-center">
          <div class="mr-[8px] items-center flex">
            <van-image width="38" height="38" src="/src/assets/icon/public/logo_full.png" />
          </div>
          <div class="fotn-pingfang flex flex-col ml-16px">
            <div class="text-[#FFFFFF] text-[32px]">X</div>
            <div class="text-[#FFFFFF]/50 opacity-50 text-[24px]">X.USDT</div>
          </div>
        </div>
        <div>
          <div class="w-150 h-72" id="chart"></div>
        </div>
        <div class="flex items-center">
          <div>
            <div class="text-[#FFFFFF] text-[32px] font-pingfang mb-6 line-height-170%">
              $16.951
            </div>
            <div class="flex items-center">
              <div class="flex items-center justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="6"
                  height="6"
                  viewBox="0 0 13 11"
                  fill="none"
                >
                  <path d="M6.06226 0L12.1244 10.5H7.82013e-05L6.06226 0Z" fill="#27C840" />
                </svg>
              </div>
              <!-- :class="indexInfo.change_rate > 0 ? 'text-[#19A55F]' : 'text-[#FF0000]'" -->
              <div class="text-[24px] text-[#27C840] font-pingfang ml-4">0.70%</div>
            </div>
          </div>
          <div class="ml-30">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 32 32"
              fill="none"
            >
              <g opacity="0.5">
                <path
                  d="M22.6156 16.6594C22.6308 16.629 22.6574 16.6024 22.6688 16.572C22.9349 16.017 22.8475 15.3329 22.3761 14.8882L11.6347 4.72829C11.0494 4.17335 10.1258 4.19996 9.57081 4.7853C9.01588 5.37064 9.04249 6.29427 9.62783 6.8492L19.267 15.9676L9.66584 25.2191C9.0843 25.7778 9.06909 26.7014 9.62783 27.283C9.9129 27.5795 10.2968 27.7315 10.6769 27.7315C11.0418 27.7315 11.4067 27.5947 11.6879 27.321L22.3305 17.0623C22.3495 17.0433 22.3571 17.0129 22.3799 16.9939C22.3951 16.9787 22.4103 16.9673 22.4293 16.9521C22.5168 16.8646 22.5586 16.7582 22.6156 16.6594Z"
                  fill="white"
                />
              </g>
            </svg>
          </div>
        </div>
      </div>
      <div class="rounded-[16px] px-30 py-36 hb mt-36px">
        <div class="text-[#fff] text-[30px] font-400 font-pingfang">邀请好友</div>
        <div class="text-[#F76938] text-[22px] uppercase font-400 font-pingfang mt-8px">
          x-Home最高可获得60%的利润返利
        </div>
      </div>
      <div class="mt-60px">
        <div class="flex items-center">
          <div
            class="text-26px text-[#fff] font-630 font-roboto px-46 py-10 bg-[#F76938] rounded-[444px]"
          >
            Little Dragon
          </div>
        </div>
        <div class="text-[#fff] text-[60px] font-900 font-roboto line-height-[70px] mt-26px">
          Little Dragon Advantages and highlights
        </div>
        <div class="text-[#fff] text-[32px] font-400 font-HarmonyOS line-height-[40px] mt-40px">
          Origin X-Home：赋能 Web3 创新
        </div>
        <div class="text-[#fff]/80 text-[24px] font-400 font-HarmonyOS line-height-[40px] mt-20px">
          Origin X-Home 是一个去中心化的 Web3
          孵化平台，连接全球的创业者、投资者与用户。通过智能合约与创新机制，它推动协作式的项目开发，打造一个透明、公平的共创生态系统。
        </div>
        <img src="/src/assets/imgs/home/detail1.png" class="w-100% mt-20px" alt="" />
        <div class="flex flex-col gap-32px mt-40px">
          <div
            class="item_box pl-31px pr-50px flex relative"
            v-for="(item, index) in dataListTwo"
            :key="index"
          >
            <div class="pt-36px">
              <div class="text-[#FFFFFF] text-[30px] font-700 font-roboto line-height-[36px] mb-21">
                {{ item.title }}
              </div>
              <div
                class="text-[#FFFFFF]/70 text-[20px] font-300 font-pingfangTC line-height-[30px]"
              >
                {{ item.content }}
              </div>
            </div>
            <div class="ml-40">
              <img :src="item.img" class="w-225 h-225" alt="" />
            </div>
            <!-- <div class="w-118 h-7 bg-[#D3ED06] rounded-[9999px] absolute bottom-0 left-30px"></div> -->
          </div>
        </div>
      </div>
      <div class="mt-60px">
        <div class="flex items-center">
          <div
            class="text-26px text-[#fff] font-630 font-roboto px-46 py-10 bg-[#F76938] rounded-[444px]"
          >
            Little Dragon
          </div>
        </div>
        <div class="text-[#fff] text-[60px] font-900 font-roboto line-height-[70px] mt-26px">
          X-Home：重塑Web3互联生态的愿景蓝图
        </div>
        <div class="text-[#fff]/50 text-[28px] font-400 font-HarmonyOS line-height-[40px] mt-28px">
          以“构建无界互联的价值互联网”为核心愿景，通过区块链底层创新与Web3生态协同，致力于打破技术壁垒、赋能个体主权、激活全球协作，让数字价值的流动像空气一样自由
        </div>
        <div class="flex flex-col gap-40px mt-20px">
          <div class="flex items-center" v-for="(value, index) in slogans" :key="index">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 38 38"
              fill="none"
            >
              <circle cx="19.5" cy="20" r="12.5" fill="black" />
              <path
                d="M1.97827 18.9999C1.97827 23.5143 3.77162 27.8438 6.96379 31.036C10.156 34.2282 14.4855 36.0215 18.9999 36.0215C23.5143 36.0215 27.8438 34.2282 31.036 31.036C34.2282 27.8438 36.0215 23.5143 36.0215 18.9999C36.0215 14.4855 34.2282 10.156 31.036 6.96379C27.8438 3.77162 23.5143 1.97827 18.9999 1.97827C14.4855 1.97827 10.156 3.77162 6.96379 6.96379C3.77162 10.156 1.97827 14.4855 1.97827 18.9999ZM27.8111 14.7106L17.1236 24.8946C16.8344 25.1698 16.4517 25.3253 16.0524 25.3297C15.6532 25.3341 15.2671 25.1871 14.9719 24.9184L10.8156 21.1421C10.5054 20.8606 10.3198 20.4673 10.2995 20.0489C10.2895 19.8417 10.3203 19.6345 10.3904 19.4393C10.4604 19.244 10.5682 19.0644 10.7076 18.9108C10.847 18.7572 11.0153 18.6326 11.2029 18.544C11.3905 18.4555 11.5937 18.4047 11.8009 18.3947C12.2193 18.3744 12.6287 18.5212 12.9389 18.8028L16.0074 21.5934L25.6356 12.4259C25.7837 12.2735 25.9611 12.1526 26.157 12.0704C26.3529 11.9882 26.5634 11.9464 26.7759 11.9474C26.9883 11.9484 27.1984 11.9923 27.3935 12.0765C27.5886 12.1606 27.7647 12.2832 27.9113 12.437C28.0579 12.5908 28.172 12.7726 28.2467 12.9715C28.3214 13.1704 28.3552 13.3824 28.3461 13.5946C28.3369 13.8069 28.285 14.0152 28.1935 14.2069C28.102 14.3987 27.9728 14.57 27.8135 14.7106H27.8111Z"
                fill="#F76938"
              />
            </svg>
            <div class="text-[#fff] text-[28px] font-400 font-roboto line-height-39px ml-10px">
              {{ value.content }}
            </div>
          </div>
        </div>
        <div>
          <img src="/src/assets/imgs/home/detail2.png" class="w-100%" alt="" />
        </div>
      </div>
    </div>
    <div class="px-30 pt-96px pb-120px bg-[#212121]">
      <div class="text-[#FFFFFF] text-[60px] font-900 font-roboto line-height-[70px] mb-39px">
        x-Home服务
      </div>
      <div class="text-[#FFFFFF]/50 text-[30px] font-400 font-roboto line-height-[40px] mb-50">
        X-Home凭借底层技术创新、生态协同模式与用户体验优化，构建了难以复制的核心竞争力，成为推动价值互联网落地的关键力量。
      </div>
      <div class="flex items-center mb-55">
        <div
          class="van-haptics-feedback text-26px text-[#000] font-630 font-roboto px-60 py-20 bg-[#F76938] rounded-[20px] border-solid border-[3px] border-[#000] flex items-center"
        >
          <div class="mr-18px">Connect Wallet</div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="18"
            viewBox="0 0 36 36"
            fill="none"
          >
            <path
              d="M18 2.25C9.3015 2.25 2.25 9.3015 2.25 18C2.25 26.6985 9.3015 33.75 18 33.75C26.6985 33.75 33.75 26.6985 33.75 18C33.75 9.3015 26.6985 2.25 18 2.25ZM28.125 18L28.125 18.0014C28.1254 18.2899 28.0162 18.5785 27.7973 18.7973C27.7752 18.8195 27.7522 18.8402 27.7287 18.86L21.0414 25.5473C20.6045 25.9842 19.8896 25.9842 19.4527 25.5473C19.0158 25.1104 19.0158 24.3955 19.4527 23.9586L24.2863 19.125H9C8.38125 19.125 7.875 18.6187 7.875 18C7.875 17.3813 8.38125 16.875 9 16.875H24.2863L19.4527 12.0414C19.0158 11.6045 19.0158 10.8896 19.4527 10.4527C19.8896 10.0158 20.6045 10.0158 21.0414 10.4527L27.7287 17.1399C27.7524 17.1599 27.7753 17.1808 27.7973 17.2027C28.0162 17.4215 28.1254 17.7101 28.125 17.9986V18Z"
              fill="white"
            />
          </svg>
        </div>
      </div>
      <div class="flex items-center gap-94 mb-60">
        <div class="w-50%">
          <img src="/src/assets/icon/home/electricity.png" class="w-100 h-100 mb-20" />
          <div class="text-[#FFFFFF] text-[28px] font-700 font-roboto line-height-39px mb-6">
            节点认购
          </div>
          <div class="text-[#FFFFFF]/50 text-[24px] font-400 font-roboto line-height-30px">
            享受生态项目空投优先获取权
          </div>
        </div>
        <div class="w-50%">
          <img src="/src/assets/icon/home/network.png" class="w-100 h-100 mb-20" />
          <div class="text-[#FFFFFF] text-[28px] font-700 font-roboto line-height-39px mb-6">
            算力认购
          </div>
          <div class="text-[#FFFFFF]/50 text-[24px] font-400 font-roboto line-height-30px">
            算力收益与全网跨链交易量实时挂钩
          </div>
        </div>
      </div>
      <div class="flex items-center gap-94">
        <div class="w-50%">
          <img src="/src/assets/icon/home/rocket.png" class="w-100 h-100 mb-20" />
          <div class="text-[#FFFFFF] text-[28px] font-700 font-roboto line-height-39px mb-6">
            入金挖矿
          </div>
          <div class="text-[#FFFFFF]/50 text-[24px] font-400 font-roboto line-height-30px">
            ≥300USDT资产即可开启入金挖矿
          </div>
        </div>
        <div class="w-50%">
          <img src="/src/assets/icon/home/defend.png" class="w-100 h-100 mb-20" />
          <div class="text-[#FFFFFF] text-[28px] font-700 font-roboto line-height-39px mb-6">
            稳定收益
          </div>
          <div class="text-[#FFFFFF]/50 text-[24px] font-400 font-roboto line-height-30px">
            享受基础年化8%的稳定收益
          </div>
        </div>
      </div>
    </div>
    <div class="px-30"></div>
  </div>
</template>
<style lang="scss" scoped>
.van-hairline--surround {
  padding: 6px 10px;
  border-radius: 6px;
}

.container {
  width: 100%;
  min-height: 100vh;
  background: #101010;

  // padding-top: calc(220px / 2);
  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  // background-color: #f5f5f5;
}

.top {
  background: var(--2, linear-gradient(180deg, #02070b 0%, #00674f 57.21%, #9ac819 100%));
}

.list_item {
  border-radius: 20px;
  background: var(--1, linear-gradient(180deg, #4a4a4a 0%, #000001 100%));

  /* 11 */
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
}

.item_box {
  border-radius: 30px;
  background: #ffffff1a;
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.06);
}

.jump_box {
  border-radius: 20px;
  border: 3px solid #000;
  background: #d3ed06;

  /* 11 */
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
}

.footer_bg {
  background: linear-gradient(91deg, #02070b -27.87%, #00674f 44.79%, #9ac819 99.13%);
}

.hb {
  background: url('/src/assets/imgs/home/hb.png') no-repeat;
  background-size: 100% 100%;
}

.custom-indicator {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
